<!doctype html>
<html lang="en">
<head>
<title>CPK分析图</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="CPK分析图">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="../../script/mes-import.js"></script>
<script type="text/javascript" src="../../script/js/echart/echarts.min.js"></script>
<style>
	.reportTable{
		float: left;
		width: 30%;
		height: 30%;
		margin-left: 5px;
		margin-top: 5px;
	}
	.reportTable .title{
		border: 1px solid black;
		padding-left: 5px;
	}
	.reportTable .itemPanel{
		border: 1px solid black;
		padding-left: 5px;
		height: 100px;
	}
	.reportTable .itemPanel p{
		margin-top: 2px;
	}
</style>
</head>

<body id="efficiencyReport" style="background: white;">
<form class="layui-form layui-form-pane">
	<div style="width: 100%;margin:0 auto;">
		<div id="calResult" style="margin:15px auto;"><div style="width: 90%;text-align: center;margin: auto;font-size: 15px;font-weight: bold;">{{cpkContent}}</div></div>
		<div style="margin-top: 20px;">
			<div id="visualization" style="width: 40%;height:400px;background: white;margin: auto;float: left"></div>
			<div style="width: 55%;background: white;margin: auto;float: left">
				<div class="reportTable">
					<div class="title">统计值</div>
					<div class="itemPanel">
						<p>样本数（N）：{{sampleSize}}</p>
						<p>平均值（Avg）：{{Avage}}</p>
						<p>最大值（Max）：{{maxNum}}</p>
						<p>最小值（Min）：{{minNum}}</p>
					</div>
				</div>
				<div class="reportTable">
					<div class="title">常量</div>
					<div class="itemPanel">
						<p>子组大小：{{sampleGroupSize}}</p>
						<p>规格上限（USL）：{{USL}}</p>
						<p>目标值（Target）：{{target}}</p>
						<p>规格下限（LSL）：{{LSL}}</p>
					</div>
				</div>
				<div class="reportTable">
					<div class="title">计算值</div>
					<div class="itemPanel">
						<p>标准差（组内Stdev）：{{StDev_zn}}</p>
						<p>标准差（整体Stdev）：{{StDev}}</p>
						<p>正3倍标准差（UCL）：{{StDev_zn3p}}</p>
						<p>负3倍标准差（LCL）：{{StDev_zn3n}}</p>
					</div>
				</div>
				<div class="reportTable">
					<div class="title">工序能力（组内）</div>
					<div class="itemPanel">
						<p>CPK：{{Cpk}}</p>
						<p>CP：{{Cp}}</p>
						<p>CPL：{{CpkL}}</p>
						<p>CPU：{{CpkU}}</p>
					</div>
				</div>
				<div class="reportTable">
					<div class="title">工序能力（整体）</div>
					<div class="itemPanel">
						<p>PPK：{{Ppk}}</p>
						<p>PP：{{Pp}}</p>
						<p>PPL：{{PpkL}}</p>
						<p>PPU：{{PpkU}}</p>
					</div>
				</div>
				<div class="reportTable">
					<div class="title">其它值</div>
					<div class="itemPanel">
						<p>Ca：{{Ca}}</p>
						<p></p>
						<p></p>
						<p></p>
					</div>
				</div>
				<div class="reportTable">
					<div class="title">实测性能</div>
					<div class="itemPanel">
						<p>PPM < LSL：{{LowBdRate}} </p>
						<p>PPM > USL：{{UpBdRate}}</p>
						<p>PPM Total：{{SumBdRate}}</p>
					</div>
				</div>
				<div class="reportTable">
					<div class="title">预测性能（组内）</div>
					<div class="itemPanel">
						<p>PPM < LSL：{{LowBdRate_E}} </p>
						<p>PPM > USL：{{UpBdRate_E}}</p>
						<p>PPM Total：{{SumBdRate_E}}</p>
					</div>
				</div>
				<div class="reportTable">
					<div class="title">预测性能（整体）</div>
					<div class="itemPanel">
						<p>PPM < LSL：{{LowBdRate_G}} </p>
						<p>PPM > USL：{{UpBdRate_G}}</p>
						<p>PPM Total：{{SumBdRate_G}}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</form>
<script type="text/javascript">
	var myChart = echarts.init(document.getElementById("visualization"));
	function sortNumber(a,b)
	{
	return a - b
	};
	function unique(arr) {
		var result = [], hash = {};
		for (var i = 0, elem; (elem = arr[i]) != null; i++) {
			if (!hash[elem]) {
				result.push(elem);
				hash[elem] = true;
			}
		}
		return result;
	}
	var vm = new Vue({
		el : "#efficiencyReport",
		data : {
			tableData:[]
			,workshopSelected:""
			,workshopSels:[]
			,cpkContent:""
            ,Avage:""
			,PpkL:""
			,Ppk:""
			,sampleSize:""
			,maxNum:""
			,PpkU:""
			,Cp:""
			,StDev:""
			,StDev_zn3p:""
			,StDev_zn:""
			,StDev_zn3n:""
			,CpkL:""
			,minNum:""
			,target:""
			,LSL:""
			,CpkU:""
			,Ca:""
			,USL:""
			,Cpk:""
			,sampleGroupSize:""
			,Pp:""
            ,UpBdRate_E:""
            ,LowBdRate_E:""
            ,SumBdRate_E:""
            ,UpBdRate_G:""
            ,LowBdRate_G:""
            ,SumBdRate_G:""
            ,UpBdRate:""
            ,LowBdRate:""
            ,SumBdRate:""
		}
		,init:function(){
			this.$nextTick(function() {
                this.$options.methods.searchData(this);
			});
		}
		,methods: {
			renderTable:function(_self,data){
				layui.use(['form','table','laydate'], function() {
                        var table = layui.table;
                        var laydate = layui.laydate;
                        var form = layui.form;
                        //赋值
						_self.Avage=data.Avage;
						_self.PpkL=data.PpkL;
						_self.Ppk=data.Ppk;
						_self.sampleSize=data.sampleSize;
						_self.maxNum=data.maxNum;
						_self.PpkU=data.PpkU;
						_self.Cp=data.Cp;
						_self.StDev=data.StDev;
						_self.StDev_zn3p=data.StDev_zn3p;
						_self.StDev_zn=data.StDev_zn;
						_self.StDev_zn3n=data.StDev_zn3n;
						_self.CpkL=data.CpkL;
						_self.minNum=data.minNum;
						_self.target=data.target;
						_self.LSL=data.LSL;
						_self.CpkU=data.CpkU;
						_self.Ca=data.Ca;
						_self.USL=data.USL;
						_self.Cpk=data.Cpk;
                    	_self.Pp=data.Pp;
                    	_self.sampleGroupSize=data.sampleGroupSize;
                        _self.UpBdRate_E=data.UpBdRate_E;
                        _self.LowBdRate_E=data.LowBdRate_E;
                        _self.SumBdRate_E=data.SumBdRate_E;
                        _self.UpBdRate_G=data.UpBdRate_G;
                        _self.LowBdRate_G=data.LowBdRate_G;
                        _self.SumBdRate_G=data.SumBdRate_G;
                        _self.UpBdRate=data.UpBdRate;
                        _self.LowBdRate=data.LowBdRate;
                        _self.SumBdRate=data.SumBdRate;
                        _self.$options.methods.drawPie(_self, data);
                    }
				);
			}
			,searchData:function(_self){
				_self = _self.target ? this : _self;
				var loadIndex;
				layui.use('layer', function(){
					var layer = layui.layer;
					loadIndex = layer.load(1);
				});
				_self.$nextTick(function() {
                    var configId = window.parent.vm.configId;
                    var scDate = window.parent.vm.scDate;
                    var isSample = window.parent.vm.isSample;
                    var remark1 = window.parent.vm.remark1;
					var remark2 = window.parent.vm.remark2;
					var remark3 = window.parent.vm.remark3;
					this.$http.post("../../spc/chartView/cpkChart",{
                        configId:configId,
                        scDate:scDate
                        ,isSample:isSample
                        ,remark1:remark1,remark2:remark2,remark3:remark3
					},{emulateJSON: true}).then(function(res){
						_self.tableData = res.body;
						_self.$options.methods.renderTable(_self,res.body);
						layer.close(loadIndex);
					});
				});
			}
			,renderForm:function(){
				layui.use('form',function(){
					layui.form.render('select');
				});
			}
			,drawPie:function(_self,data){
				var normalLineData = data.ztArrays;
				var frequencyArray = data.frequencyArray;
				var xdata = data.xArrays;
                var normalAllLineData = data.ztAllArrays;
                var frequencyMax = data.frequencyMax;

                var seriesData = [
                    {
                        name:'数量',
                        type:'bar',
                        data:frequencyArray
                    },
                    {
                        name:'正态（整体）',
                        type:'line',
                        yAxisIndex: 1,
                        data:normalAllLineData,
                        smooth: true,
                        sampling:'max',
                        smoothMonotone:'y'
                    },
                    {
                        name:'正态（组内）',
                        type:'line',
                        yAxisIndex: 1,
                        data:normalLineData,
                        smooth: true,
                        sampling:'max',
                        smoothMonotone:'y'
                    }
                ];

                /**/
                var markLineData = new Array;
                var markLineFlag = false;
                if(data.LSL&&data.LSL!='N/A'){
					markLineData.push([
						{coord:[data.LSL+'', 0],name:"规格下限（LSL）"},
						{coord:[data.LSL+'', frequencyMax+2],name:"规格下限（LSL）"}
					]);
					markLineFlag = true;
					//xdata.push(data.LSL);
                }
                if(data.target&&data.target!='N/A'){
                    markLineData.push([
                        {coord:[data.target+'', 0],name:"目标值（Target）"},
                        {coord:[data.target+'', frequencyMax+2],name:"目标值（Target）"}
                    ]);
                    markLineFlag = true;
                    //xdata.push(data.target);
				}
                if(data.USL&&data.USL!='N/A'){
                    markLineData.push([
                        {coord:[data.USL+'', 0],name:"规格上限（USL）"},
                        {coord:[data.USL+'', frequencyMax+2],name:"规格上限（USL）"}
                    ]);
                    markLineFlag = true;
                    //xdata.push(data.USL);
				}
				if(markLineFlag){
	                seriesData.push({
	                    name:'平行于y轴的趋势线',
	                    type:'line',
	                    markLine: {
	                        name:'aa',
	                        data: markLineData
	                    }
	                });
                }
				
				myChart.clear();
				//xdata.sort(sortNumber);
				//xdata=unique(xdata);
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data:['数量','正态（整体）','正态（组内）']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xdata,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '数量',
							max:frequencyMax+2,
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '正态',
                            axisLabel: {
                                formatter: '{value}'
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        },
                        {
                            show: false,
                            type: 'slider',
                            y: '98%',
                            start: 0,
                            end: 100
                        }
                    ],
                    series:seriesData
                };
				myChart.setOption(option);
			}
            ,resizeChart:function(){
                myChart.resize();
			}
		}
		,watch: {

		}
	});
</script>
</body>
</html>
